<template>
  <div class="mod-config">
    <div v-if="bookmanages">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
        <el-form-item>
          <el-select v-model="dataForm.grade" placeholder="会员身份">
            <el-option
              v-for="item in options"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.title" placeholder="职位">
            <el-option
              v-for="item in position"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.userId" placeholder="uid" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.number" placeholder="手机号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary" @click="download()">下载数据</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <el-table-column prop="userId" header-align="center" align="center" label="uid"></el-table-column>
        <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
        <el-table-column prop="coverUrl" header-align="center" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 40px;height: 40px;" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column prop="grade" header-align="center" align="center" label="会员身份">
          <template slot-scope="scope">
            {{scope.row.grade==1 ?'会员':''}}
            {{scope.row.grade==2 ?'经理':''}}
            {{scope.row.grade==3 ?'总监':''}}
          </template>
        </el-table-column>
        <el-table-column prop="title" header-align="center" align="center" label="职位">
          <template slot-scope="scope">
            <span>{{ scope.row.title === 0 ? '班长(正常分销) ' : '' }}</span>
            <span>{{ scope.row.title === 1 ? '班主任' : '' }}</span>
            <span>{{ scope.row.title === 2 ? '班长(禁止分销)' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" header-align="center" align="center" label="账户余额"></el-table-column>
        <el-table-column prop="availBalance" header-align="center" align="center" label="可提现金额"></el-table-column>
        <el-table-column prop="blockedBalance" header-align="center" align="center" label="冻结金额"></el-table-column>
        <el-table-column prop="unblockedBalance" header-align="center" align="center" label="解冻金额"></el-table-column>
        <el-table-column
          prop="nextMonthWithdrawBalance"
          header-align="center"
          align="center"
          label="下月到账金额"
        ></el-table-column>
        <el-table-column prop="ratio" header-align="center" align="center" label="本月服务系数"></el-table-column>
        <el-table-column prop="remarks" header-align="center" align="center" label="备注"></el-table-column>
        <el-table-column prop="memberStatus" header-align="center" align="center" label="会员状态">
          <template slot-scope="scope">
            {{scope.row.memberStatus==1 ?'未过期':''}}
            {{scope.row.memberStatus==0 ?'过期':''}}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="待结算列表">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showWait(scope.row.userId)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="历史服务系数">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showHistory(scope.row.userId)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="120" label="身份认证">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="idLook(scope.row.userId)">查看</el-button>
            <el-button type="text" size="small" @click="idChange(scope.row.userId)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="120" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookShow(scope.row.userId)">查看</el-button>
            <el-button type="text" size="small" @click="changeShow(scope.row.userId)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <!--查看-->
    <money-base-info-look ref="look"></money-base-info-look>
    <!--修改-->
    <money-base-info-change ref="change" @refreshDataList="getDataList"></money-base-info-change>
    <!--待结算列表-->
    <money-base-wait-list :id="userId" v-if="waitShow" ref="wait" @goback="goBack"></money-base-wait-list>
    <!--历史服务系数 -->
    <money-base-history-list :id="userId" v-if="historyShow" ref="history" @goback="goBack"></money-base-history-list>
    <!--身份认证查看-->
    <money-base-identity-look ref="identityLook"></money-base-identity-look>
    <!--身份认证修改-->
    <money-base-identity-change ref="identityChange"></money-base-identity-change>
  </div>
</template>

<script>
import MoneyBaseInfoLook from "./moneyBaseInfoLook";
import MoneyBaseInfoChange from "./moneyBaseInfoChange";
import MoneyBaseWaitList from "./moneyBaseWaitList";
import MoneyBaseHistoryList from "./moneyBaseHistoryList";
import MoneyBaseIdentityLook from "./moneyBaseIdentityLook";
import MoneyBaseIdentityChange from "./moneyBaseIdentityChange";
export default {
  data() {
    return {
      waitShow: false,
      historyShow: false,
      options: [
        {
          val: null,
          label: "全部"
        },
        {
          val: "1",
          label: "普通会员"
        },
        {
          val: "2",
          label: "经理"
        },
        {
          val: "3",
          label: "总监"
        }
      ],
      //职位
      position: [
        {
          val: null,
          label: "全部"
        },
        {
          val: "0",
          label: "班长(正常分销)"
        },
        {
          val: "1",
          label: "班主任"
        },
        {
          val: "2",
          label: "班长(禁止分销)"
        },
      ],
      dataForm: {
        key: "",
        rember: "",
        uid: "",
        phone: "",
        nickname: "",
        title: ""
      },
      userId: "",
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      bookmanages: true
    };
  },
  components: {
    MoneyBaseInfoLook,
    MoneyBaseInfoChange,
    MoneyBaseWaitList,
    MoneyBaseHistoryList,
    MoneyBaseIdentityLook,
    MoneyBaseIdentityChange
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    search(){
      this.pageIndex = 1;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let obj = {
        page: this.pageIndex,
        limit: this.pageSize
      };
      if (this.dataForm.grade) {
        obj.grade = this.dataForm.grade;
      }
      if (this.dataForm.userId) {
        obj.userId = this.dataForm.userId;
      }
      if (this.dataForm.nickname) {
        obj.nickname = this.dataForm.nickname;
      }
      if (this.dataForm.number) {
        obj.number = this.dataForm.number;
      }
      if (this.dataForm.title) {
        obj.title = this.dataForm.title;
      }
      this.$http({
        url: this.$http.adornUrl("/account/saleAccount/list"),
        method: "get",
        params: this.$http.adornParams(obj)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    idLook(id) {
      this.$nextTick(() => {
        this.$refs.identityLook.init(id);
      });
    },
    idChange(id) {
      this.$nextTick(() => {
        this.$refs.identityChange.init(id);
      });
    },
    lookShow(id) {
      this.$nextTick(() => {
        this.$refs.look.init(id);
      });
    },
    changeShow(id) {
      this.$nextTick(() => {
        this.$refs.change.init(id);
      });
    },
    showWait(id) {
      this.userId = id;
      this.waitShow = true;
      this.bookmanages = false;
    },
    goBack() {
      this.waitShow = false;
      this.historyShow = false;
      this.bookmanages = true;
    },
    showHistory(id) {
      this.userId = id;
      this.historyShow = true;
      this.bookmanages = false;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
  download() {
      let obj = {
        page: this.pageIndex,
        limit: this.pageSize
      };
      obj.number = this.dataForm.number;
      obj.nickname = this.dataForm.nickname;
      obj.userId = this.dataForm.userId;
      obj.grade = this.dataForm.grade;
      obj.title = this.dataForm.title;
      this.$http({
        url: this.$http.adornUrl("/account/saleAccount/download"),
        method: "get",
        params: this.$http.adornParams(obj),
        headers: {
          'Content-Type': 'application/json; application/octet-stream'
        },
        responseType: 'arraybuffer'
      }).then(({ data }) => {
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = '钱包.xls'
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      })
    }
  }
};
</script>
